<template>
  <q-layout view="hHh LpR fFf">
    <q-header elevated class="bg-white tw-text-slate-700">
      <q-toolbar>
        <q-btn
          class="hover:tw-text-primary"
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="toggleLeftDrawer"
        />
        <q-toolbar-title class="tw-flex tw-items-center">
          <span class="text-primary"> Salt Fish </span>
          <q-separator class="q-mr-sm q-ml-sm" color="primary" vertical />
          <div class="tw-flex tw-items-center tw-justify-between" style="flex: 1">
            <q-btn-group dense round flat>
              <q-btn
                class="hover:tw-text-primary"
                @click="undo"
                icon="arrow_back"
                label="后退"
              ></q-btn>
              <q-btn
                class="hover:tw-text-primary"
                @click="redo"
                :disable="!nodeTreeStore.canRedo"
                icon="arrow_forward"
                label="前进"
              ></q-btn>
            </q-btn-group>
            <q-btn-group dense round flat>
              <q-card color="primary" class="scale-tool tw-w-250px q-mr-sm" flat bordered>
                <q-card-section class="row tw-justify-between tw-items-center q-pa-none q-pl-sm">
                  <p class="hover:tw-text-primary" style="font-size: 16px">
                    {{ Math.round(scale * 100) }}%
                  </p>
                  <q-btn-group flat>
                    <q-btn
                      class="hover:tw-text-primary"
                      size="sm"
                      flat
                      icon="zoom_in"
                      @click="zoomIn"
                    />
                    <q-btn
                      class="hover:tw-text-primary"
                      size="sm"
                      flat
                      icon="zoom_out"
                      @click="zoomOut"
                    />
                    <q-btn class="hover:tw-text-primary" @click="scale = 1" flat>重置</q-btn>
                  </q-btn-group>
                </q-card-section>
              </q-card>
              <q-btn class="hover:tw-text-primary" @click="save" icon="save">保存</q-btn>
              <q-btn class="hover:tw-text-primary" icon="print" @click="print">打印/导出PDF</q-btn>
              <q-btn class="hover:tw-text-primary" @click="quit" icon="exit_to_app">退出</q-btn>
            </q-btn-group>
          </div>
          <q-separator class="tw-ml-20px tw-mr-20px" color="primary" vertical />
        </q-toolbar-title>
        <div>Quasar v{{ $q.version }}</div>
        <q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
      </q-toolbar>
    </q-header>
    <q-drawer elevated show-if-above v-model="leftDrawerOpen" side="left">
      <q-tabs v-model="leftTab" class="text-primary">
        <q-tab name="component" label="组件" />
        <q-tab name="nodeTree" label="节点树" />
      </q-tabs>
      <q-tab-panels v-model="leftTab" animated>
        <q-tab-panel name="component">
          <ComponentTree></ComponentTree>
        </q-tab-panel>
        <q-tab-panel name="nodeTree">
          <TreeComponent v-show="true" :root="nodeTreeStore.root"></TreeComponent>
          <q-menu fit touch-position context-menu>
            <q-list padding flat dense style="width: 200px">
              <q-item
                :disable="menuDisable"
                @click="deleteNode(nodeTreeStore.activeNodeId)"
                clickable
                v-close-popup
                class="hover:tw-text-negative"
              >
                <q-item-section avatar>
                  <q-icon name="delete" />
                </q-item-section>
                <q-item-section>删除</q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-tab-panel>
      </q-tab-panels>
    </q-drawer>
    <q-page-container class="tw-bg-gray-100 tw-relative">
      <!-- <q-card
        color="primary"
        class="scale-tool tw-w-250px"
        :style="{
          top: '60px',
          right: rightDrawerOpen ? '310px' : '10px',
          position: 'absolute',
        }"
        bordered
      >
        <q-card-section class="row tw-justify-between tw-items-center q-pa-sm">
          <p>{{ Math.round(scale * 100) }}%</p>
          <q-btn-group flat>
            <q-btn size="sm" flat icon="zoom_out" @click="zoomOut" />
            <q-btn size="sm" flat icon="zoom_in" @click="zoomIn" />
            <q-btn @click="scale = 1" flat>重置</q-btn>
          </q-btn-group>
        </q-card-section>
      </q-card> -->
      <article class="container" @mousewheel="mousewheel">
        <Root
          :style="{
            transform: `scale(${scale})`,
          }"
          ref="treeRoot"
        ></Root>
        <q-menu v-model="nodeTreeStore.contextMenu" fit auto-close touch-position context-menu>
          <q-list flat dense style="width: 200px" padding>
            <q-item
              @click="nodeTreeStore.lockChange(nodeTreeStore.activeNode.id)"
              :disable="!nodeTreeStore.activeNode"
              class="hover:tw-text-primary"
              clickable
              v-close-popup
            >
              <q-item-section avatar>
                <q-icon name="lock" />
              </q-item-section>
              <q-item-section>锁定/解锁</q-item-section>
            </q-item>
            <q-item
              @click="nodeTreeStore.tearOpen(nodeTreeStore.activeNode)"
              :disable="nodeTreeStore.activeNode?.type !== 'group'"
              class="hover:tw-text-primary"
              clickable
              v-close-popup
            >
              <q-item-section avatar>
                <q-icon name="drag_indicator" />
              </q-item-section>
              <q-item-section>打散</q-item-section>
            </q-item>
            <q-item
              @click="createGroup"
              :disable="!nodeTreeStore.temporaryGroup.children.length"
              class="hover:tw-text-primary"
              clickable
              v-close-popup
            >
              <q-item-section avatar>
                <q-icon name="reply_all" />
              </q-item-section>
              <q-item-section>组合</q-item-section>
            </q-item>
            <q-item
              @click="nodeTreeStore.copyNode(nodeTreeStore.activeNode)"
              :disable="menuDisable"
              class="hover:tw-text-primary"
              clickable
              v-close-popup
            >
              <q-item-section avatar>
                <q-icon name="content_copy" />
              </q-item-section>
              <q-item-section>复制</q-item-section>
            </q-item>
            <q-item
              :disable="menuDisable"
              class="hover:tw-text-primary"
              clickable
              @click="zIndexUp(nodeTreeStore.activeNodeId)"
              v-close-popup
            >
              <q-item-section avatar>
                <q-icon name="arrow_drop_up" />
              </q-item-section>
              <q-item-section>上移一层</q-item-section>
            </q-item>
            <q-item
              class="hover:tw-text-primary"
              :disable="menuDisable"
              @click="zIndexDown(nodeTreeStore.activeNodeId)"
              clickable
              v-close-popup
            >
              <q-item-section avatar>
                <q-icon name="arrow_drop_down" />
              </q-item-section>
              <q-item-section>下移一层</q-item-section>
            </q-item>
            <q-item
              :disable="menuDisable"
              @click="deleteNode"
              clickable
              v-close-popup
              class="hover:tw-text-negative"
            >
              <q-item-section avatar>
                <q-icon name="delete" />
              </q-item-section>
              <q-item-section>删除</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </article>
    </q-page-container>
    <q-drawer show-if-above v-model="rightDrawerOpen" side="right" elevated>
      <q-tabs v-model="rightTab" class="text-primary">
        <q-tab name="container" label="容器设置" />
        <q-tab name="component" label="组件设置" />
      </q-tabs>
      <article class="q-pa-md q-mb-md">
        <header v-show="rightTab === 'container'" id="layout-form"></header>
        <div v-show="rightTab === 'component'" id="node-form" class="q-mt-md"></div>
      </article>
    </q-drawer>
  </q-layout>
</template>
<script>
import { ref, defineComponent, computed } from 'vue';
import { useNodeTreeStore } from 'src/stores/nodeTree';
import ComponentTree from './components/ComponentTree/ComponentTree.vue';
import Root from './components/Root/Root.vue';
import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
import TreeComponent from './components/TreeComponent/TreeComponent.vue';
export default defineComponent({
  name: 'BiographicalNotes',
  components: { ComponentTree, Root, TreeComponent },
  setup() {
    const router = useRouter();
    const leftDrawerOpen = ref(false);
    const rightDrawerOpen = ref(false);
    const treeRoot = ref(null);
    const nodeTreeStore = useNodeTreeStore();
    const scale = ref(1);
    const leftTab = ref('component');
    const rightTab = ref('container');
    const $q = useQuasar();
    const tree = computed(() => {
      return [
        {
          ...nodeTreeStore.root,
        },
      ];
    });
    const quit = () => {
      nodeTreeStore.quit();
      router.push({
        name: 'PersonalSpace',
      });
    };
    const createGroup = () => {
      if (nodeTreeStore.temporaryGroup.children.length > 1) {
        nodeTreeStore.createGroup(nodeTreeStore.temporaryGroup.children);
        nodeTreeStore.resizeTemporaryGroup();
        nodeTreeStore.setActiveNode(nodeTreeStore.root);
      }
    };
    const exportToPdf = () => {
      treeRoot.value.exportToPdf();
    };
    const print = () => {
      $q.dialog({
        title: '提示',
        cancel: true,
        message:
          '导出 PDF 文档前，请确保所有页面中的图片已加载完毕。然后在弹出的打印框中选择“打印机 - 另存为PDF”，再点击“保存”按钮即可。',
      }).onOk(() => {
        treeRoot.value.print();
      });
    };
    const zoomOut = () => {
      if (scale.value - 0.1 < 0.1) return;
      scale.value -= 0.1;
      nodeTreeStore.setScale(scale.value);
    };
    const zoomIn = () => {
      scale.value += 0.1;
      nodeTreeStore.setScale(scale.value);
    };
    const zIndexUp = (id) => {
      console.log(id);

      nodeTreeStore.zIndexUp(id);
    };
    const zIndexDown = (id) => {
      nodeTreeStore.zIndexDown(id);
    };
    const mousewheel = (e) => {
      // 判断是不是按下ctrl键
      if (e.ctrlKey) {
        // 取消浏览器默认的放大缩小网页行为
        e.preventDefault();
        // 判断是向上滚动还是向下滚动
        if (e.deltaY > 0) {
          // 缩小重写，业务代码
          zoomOut();
        } else {
          // 放大重写，业务代码
          zoomIn();
        }
      }
    };
    const deleteNode = () => {
      nodeTreeStore.deleteActiveNode();
    };
    const undo = () => {
      nodeTreeStore.undo();
    };
    const redo = () => {
      nodeTreeStore.redo();
    };
    const menuDisable = computed(() => {
      return nodeTreeStore.activeNodeId === nodeTreeStore.root.id || !nodeTreeStore.activeNodeId;
    });
    const ticked = computed({
      get() {
        return nodeTreeStore.activeNodeIds;
      },
      set(val) {
        nodeTreeStore.activeNodeIds = val;
      },
    });
    const updateTicked = (val, event) => {
      // 判断是否按住shift
      if (event.shiftKey) {
        if (nodeTreeStore.activeNodeIds.includes(val)) return;
        nodeTreeStore.setActiveNodeIds(nodeTreeStore.activeNodeIds.concat([val]));
      } else {
        nodeTreeStore.setActiveNodeIds([val]);
      }
    };
    const save = () => {
      nodeTreeStore.save();
    };
    return {
      leftDrawerOpen,
      nodeTreeStore,
      zoomOut,
      zoomIn,
      tree,
      toggleLeftDrawer() {
        leftDrawerOpen.value = !leftDrawerOpen.value;
      },
      scale,
      mousewheel,
      rightDrawerOpen,
      toggleRightDrawer() {
        rightDrawerOpen.value = !rightDrawerOpen.value;
      },
      leftTab,
      rightTab,
      exportToPdf,
      treeRoot,
      deleteNode,
      undo,
      redo,
      print,
      zIndexUp,
      zIndexDown,
      menuDisable,
      ticked,
      updateTicked,
      createGroup,
      quit,
      save,
    };
  },
});
</script>
<style lang="scss" scoped>
.container {
  height: calc(100vh - 50px);
  max-height: calc(100vh - 50px);
  padding: 40px 0 200px;
  overflow: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(1);
  position: relative;
}
.scale-tool {
  z-index: 999;
  transition: all 0.3s;
}
</style>
